<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!移动端网页必备设置：内容尺寸=设备尺寸，缩放比为1>
		<meta name = "viewport" content = "width=device-width, initial-sacle=1">

		<link href="framework/font-awesome/css/font-awesome.min.css" rel = "stylesheet">
		<link href="framework/reset.css" rel = "stylesheet">
		<link href="framework/icon.css" rel = "stylesheet">
		<link href="css/index.css" rel = "stylesheet">
		<script src="js/index.js"></script>

		<title>饿了么 首页</title>
	</head>
	<body>
		<!----------------------------------------------------总容器-------------------------------------->
		<div class = "wrapper">
			<!-------------------------------header部分------------------------------->
			<header>
				<!定位图标>
				<div class = "icon-location-box">
					<div class = "icon-location"></div>
				</div>
				<div class="location-text">天津大学北洋园校区55教学楼<i class = "fa fa-caret-down"></i></div>
			</header>

			<!------------------------------- search部分 ----------------------------->
			<div class = "search">
				<div class = "search-fixed-top" id="fixedBox">
					<div class = "search-box">
						<i class = "fa fa-search"></i>搜索饿了么商家、商品名称
					</div>
				</div>
			</div>

			<!------------------------------ 点餐分类部分 ----------------------------->
			<ul class= "foodtype">
				<li>
					<img src="img/dcfl01.png">
					<p>美食</p>
				</li>
				<li>
					<img src="img/dcfl02.png">
					<p>早餐</p>
				</li>
				<li>
					<img src="img/dcfl03.png">
					<p>跑腿代购</p>
				</li>
				<li>
					<img src="img/dcfl04.png">
					<p>汉堡披萨</p>
				</li>
				<li>
					<img src="img/dcfl05.png">
					<p>甜品饮品</p>
				</li>
				<li>
					<img src="img/dcfl06.png">
					<p>速食简餐</p>
				</li>
				<li>
					<img src="img/dcfl07.png">
					<p>地方小吃</p>
				</li>
				<li>
					<img src="img/dcfl08.png">
					<p>米粉面馆</p>
				</li>
				<li>
					<img src="img/dcfl09.png">
					<p>包子粥铺</p>
				</li>
				<li>
					<img src="img/dcfl10.png">
					<p>炸鸡炸串</p>
				</li>
			</ul>

			<!--------------------------------- 横幅广告部分 ------------------------------->
			<div class = "banner">
				<h3>品质套餐</h3>
				<p>搭配齐全吃得好</p>
				<a>立即抢购 &gt;</a>
			</div>

			<!--------------------------------- 超级会员部分 ------------------------------->
			<div class = "supermember">
				<div class = " supermember-left">
					<img src="img/VIP.png">
					<h3>超级会员</h3>
					<p>&#8226; 每月享超值权益</p>
				</div>
				<div class = " supermember-right">
					立即开通 &gt;
				</div>
			</div>

			<!--------------------------------- 推荐商家部分 ------------------------------->
			<div class = "recommend">
				<div class ="recommend-line"></div>
				<p>推荐商家</p>
				<div class ="recommend-line"></div>
			</div>

			<!--------------------------------- 推荐方式部分 ------------------------------->
			<ul class = "recommendtype">
				<li>综合排序<i class="fa fa-caret-down"></i> </li>
				<li>距离最近</li>
				<li>销量最高</li>
				<li>筛选<i class="fa fa-filter"></i></li>
			</ul>

			<!--------------------------------- 推荐商家列表部分 ------------------------------->
			<ul class = "business">
				<!--------------- 商家1 ------------------>
				<li onclick="location.href='businessList.html'">
					<img src="img/sj01.png">
					<div class = "business-info">

						<!--------- 第一行 --------->
						<div class = "business-info-h">
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>

						<!--------- 第二行 --------->
						<div class="business-info-star">
							<div class = "business-info-star-left">
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class = "business-info-star-right">
								蜂鸟专栏
							</div>
						</div>
						<!--------- 第三行 --------->
						<div class = "business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>

						<!--------- 第四行 --------->
						<div class ="business-info-explain">
							<div>各种饺子</div>
						</div>

						<!--------- 第五行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon">新</div>
								<p>饿了吗新用户首单立减9元</p>
							</div>
							<div class ="business-info-promotion-right">
								<p>2个活动</p>
								<i class = "fa fa-caret-down"></i>
							</div>
						</div>

						<!--------- 第六行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon" style="background-color: #F37373">特</div>
								<p>特价商品5元起</p>
							</div>

						</div>
					</div>
				</li>

				<!--------------- 商家2 ------------------>
				<li>
					<img src="img/sj02.png">
					<div class = "business-info">

						<!--------- 第一行 --------->
						<div class = "business-info-h">
							<h3>小锅饭豆腐馆（全运店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>

						<!--------- 第二行 --------->
						<div class="business-info-star">
							<div class = "business-info-star-left">
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class = "business-info-star-right">
								蜂鸟专栏
							</div>
						</div>
						<!--------- 第三行 --------->
						<div class = "business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>

						<!--------- 第四行 --------->
						<div class ="business-info-explain">
							<div>各种饺子</div>
						</div>

						<!--------- 第五行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon">新</div>
								<p>饿了吗新用户首单立减9元</p>
							</div>
							<div class ="business-info-promotion-right">
								<p>2个活动</p>
								<i class = "fa fa-caret-down"></i>
							</div>
						</div>

						<!--------- 第六行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon" style="background-color: #F37373">特</div>
								<p>特价商品5元起</p>
							</div>

						</div>
					</div>
				</li>

				<!--------------- 商家3 ------------------>
				<li>
					<img src="img/sj03.png">
					<div class = "business-info">

						<!--------- 第一行 --------->
						<div class = "business-info-h">
							<h3>麦当劳麦乐送（全运路店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>

						<!--------- 第二行 --------->
						<div class="business-info-star">
							<div class = "business-info-star-left">
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class = "business-info-star-right">
								蜂鸟专栏
							</div>
						</div>
						<!--------- 第三行 --------->
						<div class = "business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>

						<!--------- 第四行 --------->
						<div class ="business-info-explain">
							<div>各种饺子</div>
						</div>

						<!--------- 第五行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon">新</div>
								<p>饿了吗新用户首单立减9元</p>
							</div>
							<div class ="business-info-promotion-right">
								<p>2个活动</p>
								<i class = "fa fa-caret-down"></i>
							</div>
						</div>

						<!--------- 第六行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon" style="background-color: #F37373">特</div>
								<p>特价商品5元起</p>
							</div>

						</div>
					</div>
				</li>

				<!--------------- 商家4 ------------------>
				<li>
					<img src="img/sj04.png">
					<div class = "business-info">

						<!--------- 第一行 --------->
						<div class = "business-info-h">
							<h3>米村拌饭（浑南店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>

						<!--------- 第二行 --------->
						<div class="business-info-star">
							<div class = "business-info-star-left">
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class = "business-info-star-right">
								蜂鸟专栏
							</div>
						</div>
						<!--------- 第三行 --------->
						<div class = "business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>

						<!--------- 第四行 --------->
						<div class ="business-info-explain">
							<div>各种饺子</div>
						</div>

						<!--------- 第五行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon">新</div>
								<p>饿了吗新用户首单立减9元</p>
							</div>
							<div class ="business-info-promotion-right">
								<p>2个活动</p>
								<i class = "fa fa-caret-down"></i>
							</div>
						</div>

						<!--------- 第六行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon" style="background-color: #F37373">特</div>
								<p>特价商品5元起</p>
							</div>

						</div>
					</div>
				</li>

				<!--------------- 商家5 ------------------>
				<li>
					<img src="img/sj05.png">
					<div class = "business-info">

						<!--------- 第一行 --------->
						<div class = "business-info-h">
							<h3>申记串道（中海康城店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>

						<!--------- 第二行 --------->
						<div class="business-info-star">
							<div class = "business-info-star-left">
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class = "business-info-star-right">
								蜂鸟专栏
							</div>
						</div>
						<!--------- 第三行 --------->
						<div class = "business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>

						<!--------- 第四行 --------->
						<div class ="business-info-explain">
							<div>各种饺子</div>
						</div>

						<!--------- 第五行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon">新</div>
								<p>饿了吗新用户首单立减9元</p>
							</div>
							<div class ="business-info-promotion-right">
								<p>2个活动</p>
								<i class = "fa fa-caret-down"></i>
							</div>
						</div>

						<!--------- 第六行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon" style="background-color: #F37373">特</div>
								<p>特价商品5元起</p>
							</div>

						</div>
					</div>
				</li>

				<!--------------- 商家6 ------------------>
				<li>
					<img src="img/sj06.png">
					<div class = "business-info">

						<!--------- 第一行 --------->
						<div class = "business-info-h">
							<h3>半亩良田排骨米饭</h3>
							<div class="business-info-like">&#8226;</div>
						</div>

						<!--------- 第二行 --------->
						<div class="business-info-star">
							<div class = "business-info-star-left">
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<i class = "fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class = "business-info-star-right">
								蜂鸟专栏
							</div>
						</div>
						<!--------- 第三行 --------->
						<div class = "business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>

						<!--------- 第四行 --------->
						<div class ="business-info-explain">
							<div>各种饺子</div>
						</div>

						<!--------- 第五行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon">新</div>
								<p>饿了吗新用户首单立减9元</p>
							</div>
							<div class ="business-info-promotion-right">
								<p>2个活动</p>
								<i class = "fa fa-caret-down"></i>
							</div>
						</div>

						<!--------- 第六行 --------->
						<div class ="business-info-promotion">
							<div class ="business-info-promotion-left">
								<div class="business-info-promotion-left-incon" style="background-color: #F37373">特</div>
								<p>特价商品5元起</p>
							</div>

						</div>
					</div>
				</li>

			</ul>

			<!--------------------------------- 底部菜单部分 ------------------------------->
			<ul class="footer">
				<li>
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-compass"></i>
					<p>发现</p>
				</li>
				<li onclick="location.href='orderList.html'">
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li onclick="location.href='login.html'">
					<i class="fa fa-user-o"></i>
					<p>我的</p>
				</li>
			</ul>

		</div>
	</body>
</html>
